<template>
  <div class="attraction-container">
    <!-- 顶部轮播图 -->
    <el-carousel 
      indicator-position="outside"
      height="600px"
      class="carousel-container"
    >
      <el-carousel-item v-for="(img, index) in attraction.images" :key="index">
        <img :src="img" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>

    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 标题和基本信息 -->
      <div class="header-section">
        <h1 class="attraction-title">{{ attraction.name }}</h1>
        <div class="meta-info">
          <div class="rating">
            <el-rate 
              v-model="attraction.rating" 
              disabled 
              :colors="['#ffd700', '#ffd700', '#ffd700']"
            />
            <span class="score">{{ formatRating(attraction.rating) }}</span>
          </div>
          <div class="stats">
            <span class="stat-item">
              <el-icon><View /></el-icon>
              {{ formatStatNumber(attraction.views) }} 浏览
            </span>
            <span class="stat-item">
              <el-icon><ChatDotRound /></el-icon>
              {{ formatStatNumber(attraction.comments) }} 评论
            </span>
            <span class="stat-item">
              <el-icon><Star /></el-icon>
              {{ formatStatNumber(attraction.collects) }} 收藏
            </span>
          </div>
        </div>
      </div>

      <!-- 基本信息卡片 -->
      <el-card class="info-card">
        <div class="info-grid">
          <div class="info-item">
            <el-icon><Clock /></el-icon>
            <div>
              <h4>开放时间</h4>
              <p>{{ attraction.openTime }}</p>
            </div>
          </div>
          <div class="info-item">
            <el-icon><PriceTag /></el-icon>
            <div>
              <h4>门票价格</h4>
              <p>{{ attraction.ticketPrice }}</p>
            </div>
          </div>
          <div class="info-item">
            <el-icon><Location /></el-icon>
            <div>
              <h4>详细地址</h4>
              <p>{{ attraction.address }}</p>
            </div>
          </div>
          <div class="info-item">
            <el-icon><Guide /></el-icon>
            <div>
              <h4>建议游玩</h4>
              <p>{{ attraction.duration }}</p>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 特色标签 -->
      <div class="feature-tags">
        <el-tag
          v-for="(tag, index) in attraction.tags"
          :key="index"
          type="info"
          effect="dark"
          class="feature-tag"
        >
          #{{ tag }}
        </el-tag>
      </div>

      <!-- 详细介绍 -->
      <div class="description-section">
        <h3 class="section-title">景点介绍</h3>
        <div class="description-content">
          <p v-for="(para, index) in attraction.description" :key="index">
            {{ para }}
          </p>
        </div>
      </div>

      <!-- 实用信息 -->
      <div class="tips-section">
        <h3 class="section-title">实用攻略</h3>
        <el-collapse v-model="activeTips">
          <el-collapse-item title="交通指南" name="1">
            <p>{{ attraction.traffic }}</p>
          </el-collapse-item>
          <el-collapse-item title="最佳时间" name="2">
            <p>{{ attraction.bestTime }}</p>
          </el-collapse-item>
          <el-collapse-item title="注意事项" name="3">
            <ul>
              <li v-for="(tip, index) in attraction.notes" :key="index">
                {{ tip }}
              </li>
            </ul>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 互动操作栏 -->
      <div class="action-bar">
        <el-button 
          type="danger" 
          :icon="attraction.collected ? StarFilled : Star"
          @click="toggleCollect"
          class="action-btn"
        >
          {{ attraction.collected ? '已收藏' : '收藏' }}
        </el-button>
        <el-button 
          type="primary" 
          icon="Share"
          class="action-btn"
          @click="handleShare"
        >
          分享
        </el-button>
        <el-button 
          type="success" 
          icon="ChatLineRound"
          class="action-btn"
          @click="scrollToComments"
        >
          写评论
        </el-button>
        <!-- 地图按钮 -->
        <el-button 
          type="warning" 
          icon="MapLocation"
          class="action-btn"
          @click="handleViewMap"
        >
          查看地图
        </el-button>
      </div>

      <!-- 评论区域 -->
      <div class="comments-section" ref="commentsSection">
        <h3 class="section-title">游客评价（{{ formatStatNumber(attraction.comments) }}）</h3>
         <!-- 评论列表 -->
        <div class="comment-list">
          <div 
            v-for="comment in comments"  
            :key="comment.id" 
            class="comment-item"
          >
            <!-- 用户头像 -->
            <el-avatar :size="40" :src="comment.user.avatar" />
            <!-- 评论内容 -->
            <div class="comment-content">
              <!-- 评论头部（用户名+评分+时间） -->
              <div class="comment-header">
                <span class="username">{{ comment.user.name }}</span>
                <el-rate 
                  v-model="comment.rating" 
                  disabled 
                  :colors="['#ffd700', '#ffd700', '#ffd700']"
                />
                <span class="comment-time">{{ comment.formattedTime }}</span>
              </div>
              <!-- 评论正文 -->
              <p class="comment-text">{{ comment.content }}</p>
              <!-- 评论图片（如果有） -->
              <div class="comment-images" v-if="comment.images">
                <img 
                  v-for="(img, index) in comment.images"
                  :key="index"
                  :src="img"
                  class="comment-image"
                  @click="showImagePreview(img)"
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 地图位置 -->
      <div class="map-section">
        <h3 class="section-title">景点位置</h3>
        <div class="map-container">
          <img 
            :src="attraction.mapImage" 
            alt="地图位置" 
            class="map-image"
            @click="showMapDetail"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { MapLocation } from '@element-plus/icons-vue'
import { attractions } from '@/mock/attractions' // 导入 mock 数据

import {
  Star,
  StarFilled,
  View,
  ChatDotRound,
  Clock,
  PriceTag,
  Location,
  Guide,
  Share,
  ChatLineRound
} from '@element-plus/icons-vue'

// 路由实例
const router = useRouter()
const route = useRoute()

// 根据路由参数获取景点数据
const attractionId = route.params.id
const rawAttractionData = attractions[attractionId]

// 处理未找到景点的错误情况
if (!rawAttractionData) {
  router.push('/404') // 跳转到404页面
}

// 使用响应式对象（需要深拷贝避免污染原始数据）
const attraction = ref(JSON.parse(JSON.stringify(rawAttractionData)))

// 评论数据可以直接使用 attraction.value.comments
const comments = computed(() => attraction.value.comments)
// 格式化工具函数
const formatStatNumber = (value) => {
  return value >= 10000 
    ? `${(value/10000).toFixed(1)}万` 
    : value.toLocaleString('zh-CN')
}

const formatRating = (value) => {
  return value.toFixed(1)
}

const formatDateTime = (value) => {
  const date = new Date(value)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

/* // 模拟数据
const attraction = ref({
  id: 1,
  name: '巴黎埃菲尔铁塔',
  images: [
    'https://picsum.photos/800/600?random=1',
    'https://picsum.photos/800/600?random=2',
    'https://picsum.photos/800/600?random=3'
  ],
  rating: 4.7,
  views: 12345,
  comments: 567,
  collects: 890,
  openTime: '09:00 - 23:00（全年开放）',
  ticketPrice: '电梯票：€25 楼梯票：€10',
  address: 'Champ de Mars, 5 Avenue Anatole France, 75007 Paris',
  duration: '3-4小时',
  tags: ['地标建筑', '浪漫圣地', '夜景绝美', '拍照打卡'],
  description: [
    '埃菲尔铁塔是巴黎最具代表性的地标建筑，建成于1889年，为纪念法国大革命100周年而建。',
    '塔高324米，分为三层，各层都设有观景平台，可俯瞰巴黎全景。',
    '建议傍晚时分登塔，可以同时欣赏白天和夜晚两种不同景色。'
  ],
  traffic: '地铁：6号线、9号线至Trocadéro站\n公交：42路、82路至Tour Eiffel站',
  bestTime: '4月-10月，建议下午5点后参观',
  notes: [
    '需提前在官网预约参观时间',
    '禁止携带大型行李箱和危险物品',
    '顶层观景台风大，建议携带外套'
  ],
  collected: false,
  mapImage: 'https://picsum.photos/800/400?random=4'
}) */

/* const comments = ref([
  {
    id: 1,
    user: {
      name: '旅行达人',
      avatar: 'https://picsum.photos/40/40?1'
    },
    rating: 4.5,
    content: '夜景非常震撼，登塔体验很棒！排队时间稍长建议提前购票',
    time: '2024-03-20T15:30:00',
    images: [
      'https://picsum.photos/200/200?random=5',
      'https://picsum.photos/200/200?random=6'
    ]
  },
  {
    id: 2,
    user: {
      name: '摄影爱好者',
      avatar: 'https://picsum.photos/40/40?2'
    },
    rating: 4.8,
    content: '日出时分的铁塔特别美，推荐给喜欢摄影的朋友',
    time: '2024-03-21T08:15:00'
  }
]) */

const activeTips = ref(['1'])
const commentsSection = ref(null)

// 计算属性处理格式化评论
const formattedComments = computed(() => {
  return comments.value.map(comment => ({
    ...comment,
    formattedTime: formatDateTime(comment.time)
  }))
})

// 交互方法
const toggleCollect = () => {
  attraction.value.collected = !attraction.value.collected
  attraction.value.collects += attraction.value.collected ? 1 : -1
}

const scrollToComments = () => {
  commentsSection.value.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  })
}

const handleShare = () => {
  navigator.clipboard.writeText(window.location.href)
    .then(() => {
      ElMessage.success('链接已复制到剪贴板')
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制链接')
    })
}

/* const showMapDetail = () => {
  router.push({
    name: 'AttractionMap',
    params: { id: attraction.value.id }
  })
} */
const handleViewMap = () => {
  router.push({
    path:'/show-map', // 确保路由配置中有这个名称
    query: { id: attraction.value.id } // 使用 query 传递 ID
  })
}


const showImagePreview = (imgUrl) => {
  ElImageViewer({
    urlList: [imgUrl],
    initialIndex: 0
  })
}

// 初始化加载
onMounted(() => {
  document.title = `${attraction.value.name} - 景点详情`
})
</script>

<style scoped lang="scss">
.attraction-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
}

.carousel-container {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.header-section {
  margin-bottom: 32px;

  .attraction-title {
    font-size: 36px;
    margin: 0 0 12px;
    color: #1a1a1a;
    line-height: 1.2;
  }

  .meta-info {
    display: flex;
    align-items: center;
    gap: 30px;

    .rating {
      display: flex;
      align-items: center;
      gap: 8px;

      .score {
        font-size: 24px;
        color: #ffd700;
        font-weight: bold;
      }
    }

    .stats {
      display: flex;
      gap: 20px;
      color: #666;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;

        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }
}

.info-card {
  margin-bottom: 24px;

  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 16px;

    .info-item {
      display: flex;
      gap: 12px;
      align-items: center;

      .el-icon {
        font-size: 24px;
        color: var(--el-color-primary);
        flex-shrink: 0;
      }

      h4 {
        margin: 0 0 4px;
        font-size: 16px;
        color: #333;
      }

      p {
        margin: 0;
        color: #666;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }
}

.feature-tags {
  margin: 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  .feature-tag {
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    background: #f0f2f5;
    border: none;
    color: #606266;
  }
}

.section-title {
  font-size: 24px;
  border-left: 4px solid var(--el-color-primary);
  padding-left: 12px;
  margin: 32px 0 24px;
  color: #1a1a1a;
}

.description-content {
  line-height: 1.8;
  color: #333;
  font-size: 15px;
  padding: 0 16px;

  p {
    margin-bottom: 1em;
    text-indent: 2em;
  }
}

.action-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
  padding-top: 20px;
  border-top: 1px solid #eee;

  .action-btn {
    padding: 12px 32px;
    border-radius: 24px;
    font-weight: bold;
    transition: transform 0.2s;

    &:hover {
      transform: translateY(-2px);
    }
  }
}

.comment-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  margin-bottom: 16px;
  background: #f8f9fa;
  border-radius: 12px;

  .comment-content {
    flex: 1;

    .comment-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;

      .username {
        font-weight: bold;
        font-size: 14px;
      }

      .el-rate {
        margin-left: auto;
      }

      .comment-time {
        color: #999;
        font-size: 12px;
      }
    }

    .comment-text {
      color: #333;
      font-size: 14px;
      line-height: 1.6;
    }

    .comment-images {
      display: flex;
      gap: 8px;
      margin-top: 12px;

      .comment-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s;

        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }
}

.map-section {
  margin: 40px 0;

  .map-image {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    &:hover {
      transform: scale(1.01);
    }
  }
}

@media (max-width: 768px) {
  .header-section {
    .attraction-title {
      font-size: 28px;
    }

    .meta-info {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;

    .action-btn {
      width: 100%;
    }
  }

  .map-image {
    height: 250px;
  }
}
</style>